<template>
    <div class="flex gap-4">
        <!-- 历史记录侧边栏 -->
        <div class="w-[220px] bg-white rounded-lg shadow-lg overflow-hidden h-[532px]">
            <div class="bg-primary px-4 py-3" style="background-color: #64B5F6 !important;">
                <div class="flex items-center text-white">
                    <i class="fas fa-history mr-2"></i>
                    <span class="text-lg font-medium">历史记录</span>
                </div>
            </div>
            <!-- 历史记录部分 -->
            <div class="p-4 h-[460px] overflow-y-auto">
                <div v-for="(record, index) in historyRecords" :key="index"
                    class="border-b border-gray-100 pb-3 mb-3 hover:bg-gray-50 rounded p-2">
                    <div class="flex justify-between items-start">
                        <div  class="flex-1" >
                            <div  @click="openHistoryDialog(record.date)" class="text-sm text-gray-900 mb-1">{{ record.title }}</div>
                            <div class="text-xs text-gray-500">{{ record.date }}</div>
                        </div>
                        <!-- //弹窗 -->
                        <el-popconfirm
                            width="220"
                            :icon="InfoFilled"
                            icon-color="#626AEF"
                            title="Are you sure to delete this?"
                            @cancel="onCancel"
                        >
                            <template #reference>
                        <button class="text-gray-400 hover:text-gray-600 p-1">
                            <i class="iconfont icon-shanchu" style="color: red;"></i>
                        </button>
                            </template>
                            <template #actions="{ confirm, cancel }">
                            <el-button size="small" @click="cancel">No!</el-button>
                            <el-button
                                type="danger"
                                size="small"
                                :disabled="!clicked"
                                @click="confirm">
                                Yes?
                                
                            </el-button>
                            </template>
                        </el-popconfirm>
                        <!-- <button class="text-gray-400 hover:text-gray-600 p-1" @click="deleteRecord(index)">
                            <i class="iconfont icon-shanchu" style="color: red;"></i>
                        </button> -->
                    </div>
                </div>
            </div>
        </div>

        <!-- AI问答区域 -->
        <div class="w-[750px] bg-white rounded-lg shadow-lg overflow-hidden">
            <div class="bg-primary px-4 py-3 flex justify-between items-center"
                style="background-color: #64B5F6 !important;">
                <div class="flex items-center text-white">
                    <i class="iconfont icon-jiqiren_o" style="font-size: 1.5rem; color: #ffffff;"></i>
                    &nbsp; <span class="text-lg font-medium">人工智能问答</span>
                </div>
                <button class="text-white hover:bg-white/20 p-1 rounded-full" @click="closeAIChat">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="h-[400px] p-4 overflow-y-auto">
                <!-- AI问答对话框 -->
                <div v-for="(message, index) in chatMessages" :key="index" class="flex items-start mb-4">
                    <div class="w-8 h-8 rounded-full bg-[#64B5F6] flex items-center justify-center text-white mr-2">
                        <i class="iconfont icon-jiqiren_o" style="font-size: 1.5rem; color: #ffffff;"></i>
                    </div>

                    <div class="bg-gray-100 rounded-lg p-3 max-w-[80%]">
                        <p>{{ message }}</p>
                    </div>
                </div>
            </div>
            <div class="border-t p-4">
                <div class="flex mb-3">
                    <button
                        class="text-sm px-4 py-2 rounded-button bg-primary text-white hover:bg-primary/90 whitespace-nowrap"
                        @click="clearChat" style="background-color: #64B5F6 !important;">
                        <i class="fas fa-sync-alt mr-1"></i>
                        清空对话
                    </button>
                </div>
                <div class="flex">
                    <div class="flex-1 relative">
                        <textarea
                            class="w-full px-4 py-2 pr-12 rounded-button border-2 border-gray-300 focus:border-black focus:ring-0 resize-none"
                            rows="3" v-model="userInput" placeholder="消耗1积分进行智能问答"></textarea>
                    </div>
                    <button style="background-color: #64B5F6 !important;"
                        class="ml-2 px-6 py-2 text-lg rounded-md bg-primary text-white hover:bg-primary/90 whitespace-nowrap self-end"
                        @click="sendMessage">
                        发送
                    </button>
                </div>
            </div>
        </div>
        <!-- 历史记录弹框 -->
        <el-dialog v-model="showHistoryDialog" width="60%" class="ai-chat-dialog" :modal="true"
            :close-on-click-modal="false">
            <div class="relative">
                <!-- 关闭按钮 -->
                <button class="absolute top-2 right-2 text-gray-600" @click="showHistoryDialog = false">
                    <i class="fas fa-times"></i>
                </button>

                <!-- 弹窗标题 -->
                <h3 class="text-xl font-semibold mb-4">AI问答</h3>

                <div class="ai-chat-content">
                    <!-- 在这里插入AI问答内容组件 -->
                    <history-dialog :date="selectedDate" v-model="showHistoryDialog" />
                </div>
            </div>
        </el-dialog>
    </div>
</template>
  
<script setup>
import { ref } from 'vue'
import historyDialog from './historyDialog.vue'; // 引入历史记录弹窗组件
import { InfoFilled } from '@element-plus/icons-vue'
// 历史记录数据
const historyRecords = ref([
    { title: '如何使用人工智能提高工作效率？', date: '2024-02-20 14:30' },
    { title: '请介绍一下机器学习的基本概念', date: '2024-02-20 11:25' },
    { title: '深度学习和传统机器学习有什么区别？', date: '2024-02-19 16:45' },
])

// AI聊天记录
const chatMessages = ref([
    '您好！我是AI助手，请问有什么可以帮您？',
])

// 用户输入
const userInput = ref('')

const clicked = ref(false)
function onCancel() {
  clicked.value = true
}
// 控制弹窗显示的状态
const showHistoryDialog = ref(false);

// 选中的历史记录日期
const selectedDate = ref(null);

// 打开历史记录弹窗
const openHistoryDialog = (date) => {
    selectedDate.value = date;
    showHistoryDialog.value = !showHistoryDialog.value;
};

// 删除历史记录
const deleteRecord = (index) => {
    historyRecords.value.splice(index, 1);
};

// 清空聊天记录
const clearChat = () => {
    chatMessages.value = []
}

// 发送消息
const sendMessage = () => {
    if (userInput.value.trim()) {
        chatMessages.value.push(userInput.value)
        userInput.value = ''
    }
}

// 关闭AI问答
const closeAIChat = () => {
    // 这里可以添加关闭逻辑，比如关闭弹窗等
    alert('AI问答窗口关闭')
}
</script>
  
<style scoped>
/* 可自定义样式 */
</style>
  
  
<style scoped>
/* 设置页面容器宽度为 100vw 和高度为 100vh，保证页面大小与浏览器同步 */
.full-screen-container {
    width: 100vw;
    /* 浏览器窗口的宽度 */
    height: 100vh;
    /* 浏览器窗口的高度 */
    background-color: #3a88bc;
    /* 可以选择合适的背景色 */
    margin: 0;
    /* 去除默认的外边距 */
    padding: 0;
    /* 去除默认的内边距 */
}

/* 如果有特定的样式应用于 .body，可以考虑调整 */
.body {
    width: 100%;
}
</style>
  